<template>
	<view class="box">
		<view class="head">
			<view class="list_1">
				<view class="item_1">
					<view class="l">
						<view class="title">{{activityData.activityName}}</view>
						<view class="time" v-if="activityData && activityData.activityStartTime">
							<image src="https://honor-hall.oss-cn-chengdu.aliyuncs.com/time.png" mode="aspectFill"></image>{{activityData.activityStartTime.slice(0,10).replace(/-/g,'.')}}-{{activityData.activityEndTime.slice(0,10).replace(/-/g,'.')}}
						</view>
						<view v-if="activityData.activityStartTime>currTime" class="btn">未开始</view>
						<view v-else-if="activityData.activityEndTime<currTime" class="btn bout">已结束</view>
						<view v-else class="btn bin">进行中</view>
					</view>
					<view class="r">
						<image :src="activityData.activityPoster" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="pgbox">
			<view class="title">
				<view class="lt">挑战进度</view>
				<view class="rt">打卡时间：{{activityData.clockInStartTime.slice(0,10).replace(/-/g,'.')}}至{{activityData.clockInEndTime.slice(0,10).replace(/-/g,'.')}}</view>
			</view>
			<view class="pg">
				<progress class="p" :percent="percent" stroke-width="5" border-radius="5" active-color="#5794F1"/>
				<view class="txt"><text class="c">{{activityData.completeNumber}}</text>/{{activityData.needCompleteNumber}}</view>
			</view>
			<!-- <view class="foot">进度完成可获得XXX奖品</view> -->
			
		</view>
		<view class="date">
			<cz-calender class="box" :currentDate="currDate" :taskList="taskList"></cz-calender>
		</view>
		<view class="foot">
			<view class="box">
				<view class="btn_r" :class="activityData.activityStartTime<currTime && activityData.activityEndTime>currTime?'':'over'" @click="onClick">
					立即挑战
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getUrlParamsInH5, getUrlParamsInWeixin, rpx2px, wxSetUpShareFunction } from "../../../utils/utils";
import { onShow } from '@dcloudio/uni-app';
import { getUserSignRecord } from '../../../api/activity';

onShow(()=>{
	/* #ifdef MP-WEIXIN */
	activityId.value = getUrlParamsInWeixin()?.id;
	wxSetUpShareFunction();
	/* #endif */
	/* #ifdef H5 */
	activityId.value = getUrlParamsInH5()?.id;
	/* #endif */
	getActivityData()
})
// import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
// const { proxy } = getCurrentInstance();
const activityId = ref('')
const activityData = ref({})
const percent = ref(0)

let today = new Date()
const year = today.getFullYear();
const month = ('0' + (today.getMonth() + 1)).slice(-2);
const day = ('0' + today.getDate()).slice(-2);
const hours = ('0' + today.getHours()).slice(-2);
const minutes = ('0' + today.getMinutes()).slice(-2);
const seconds = ('0' + today.getSeconds()).slice(-2);
const dateStr = `${year}-${month}-${day}`
const timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
const currDate = ref(dateStr)
const currTime = ref(timeStr)
const taskList = ref([])

const getActivityData = async () => {
	const { code, data } = await getUserSignRecord(activityId.value);
	if (code === 200) {
	  activityData.value = { ...data };
	  percent.value = Math.floor((data.completeNumber/data.needCompleteNumber)*100)
	  // data.dateCompleteInfoList.map(item=>item.completeStatus=1)
	  taskList.value = data.dateCompleteInfoList
	}
}


const onClick = () => {
	if (activityData.value.activityStartTime<currTime.value && activityData.value.activityEndTime>currTime.value) {
		if (activityData.value.clockInStartTime<currTime.value && activityData.value.clockInEndTime>currTime.value) {
			if (activityData.value.userTodayStatus<1) {
				uni.navigateTo({
					url:`./activity-sign?id=${activityId.value}`
				})
			} else {
				uni.showToast({
					icon:'none',title:'今日已打卡'
				})
			}
		} else {
			const msg = activityData.value.clockInStartTime>currTime.value ? '打卡未开始':'打卡已结束'
			uni.showToast({
				icon:'none',title:msg
			})
		}
		
	} else {
		const msg = activityData.value.activityStartTime>currTime.value ? '活动未开始':'活动已结束'
		uni.showToast({
			icon:'none',title:msg
		})
	}
	
}	
</script>

<style lang="less" scoped>
.box{
	position: relative;
	background-color: #F6F8FC;
	display: flex;
	flex-direction: column;
	align-items: center;
	.head{
		width: 100vw;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		.list_1{
			width: 620rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			.item_1{
				width: 620rpx;
				height: 180rpx;
				display: flex;
				justify-content: space-between;
				background-color: #EFF1F5;
				padding-top: 10rpx;
				padding-left: 30rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.l{
					display: flex;
					flex-direction: column;
					.title{
						font-size: 36rpx;
						font-weight: bold;
					}
					.time{
						color: #969998;
						height: 40rpx;
						font-size: 32rpx;
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}
					}
					.btn{
						margin-top: 10rpx;
						width: 140rpx;
						height: 50rpx;
						background-color: #ffffff;
						color: #FA8E05;
						font-size: 30rpx;
						font-weight: bold;
						text-align: center;
						line-height: 50rpx;
						border-radius: 5rpx;
						&.bin{
							color: #5794F1;
						}
						&.bout{
							color: #969696;
						}
					}
				}
				.r{
					display: flex;
					justify-content: center;
					margin-right: 20rpx;
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 15rpx;
					}
				}
			}
		}
		
	}
	.pgbox{
		width: 100vw;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding-top: 20rpx;
		padding-left: 100rpx;
		padding-bottom: 20rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		.title{
			display: flex;
			justify-content: flex-start;
			align-items: flex-end;
			.lt{
				font-size: 36rpx;font-weight: bold;margin-right: 10rpx;
			}
			.rt{
				font-size: 24rpx;color: #969998;
			}
		}
		.pg{
			width: 620rpx;
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.p{
				width: 620rpx;
				margin-right: 10rpx;
			}
			.txt{
				.c{
					color: #5794F1;
				}
			}
		}
		.foot{
			color:#989898;
			font-size:28rpx;
		}
	}
	.foot{
		position: fixed;
		z-index: 1;
		bottom: 0;
		width: 100vw;
		background-color: #F6F8FC;
		.box{
			background-color: #ffffff;
			width: 100vw;
			height: 140rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			// .btn_l{
			// 	width: 295rpx;
			// 	height: 60rpx;
			// 	border: 1rpx solid #00B689;
			// 	text-align: center;
			// 	line-height: 60rpx;
			// 	color: #00B689;
			// 	border-radius: 50rpx;
			// 	font-weight: bold;
			// }
			.btn_r{
				width: 680rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				color: #ffffff;
				border-radius: 50rpx;
				background: linear-gradient(to right,#01E4BF,#0080DB);
				&.over{
					background: linear-gradient(to right,#575757,#E4E4E4);
				}
			}
		}
	}
	
}	       
</style>
